import { useNamespace } from '@ibiz-template/vue3-util';
import { defineComponent, ref } from 'vue';
import './avatar-collapse-btn.scss';

export const AvatarCollapseBtn = defineComponent({
  name: 'AvatarCollapseBtn',
  setup() {
    const ns = useNamespace('avatar-collapse');
    const collapseType = ref(false);
    const collapse = () => {
      collapseType.value = !collapseType.value;
      const tempAvatarCol = document.querySelector(
        '.avatar-dataview-container',
      ) as HTMLElement;
      if (tempAvatarCol) {
        if (collapseType.value) {
          // 展开头像组件
          Object.assign(tempAvatarCol.style, {
            height: 'auto',
          });
        } else {
          // 收缩头像组件
          Object.assign(tempAvatarCol.style, {
            height: '60px',
          });
        }
      }
    };
    return {
      collapse,
      ns,
      collapseType,
    };
  },

  render() {
    return (
      <div
        class={[
          this.ns.is('collapse-open', this.collapseType),
          this.ns.is('collapse-close', !this.collapseType),
          this.ns.b(),
        ]}
        onClick={() => this.collapse()}
      >
        {this.collapseType ? (
          <i class='fa fa-angle-up' />
        ) : (
          <i class='fa fa-angle-down' />
        )}
      </div>
    );
  },
});
